<template>
  <div class="home">
    <div class="px-6 flex justify-between items-center" style="height: 55px">
      <div class="flex items-center gap-3">
        <ArkIconFont cls="icon-jiaoyu text-blue" size="24"/>
        <div class="text-xl font-semibold">上海市汇师小学物联中心</div>
      </div>
      <div class="flex items-center gap-2">
        <div>校园管理员</div>

        <ArkAvatar name="陈"/>

        <ElDropdown>
          <span class="el-dropdown-link">
            陈
            <el-icon>
            <MoreFilled/>
          </el-icon>
          </span>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </ElDropdown>
      </div>
    </div>

    <div class="px-6 pb-6 grid grid-cols-10 grid-rows-4 gap-3">
      <ArkCard title="概览" class="col-span-4 row-span-1">
        <div class="px-4 py-1 flex justify-between">
          <ArkStatisticVisual v-for="(item,index) in statisticsList" :key="index"
            :title="item.title" :value="item.value" :unit="item.unit" :bgColor="item.bgColor">
            <ArkIconFont :cls="item.iconCls" class="!text-2xl"/>
          </ArkStatisticVisual>
        </div>
      </ArkCard>

      <ArkCard title="能耗统计" class="col-span-6 row-span-2">
        <el-radio-group class="m-2.5" v-model="energySelected">
          <ElRadioButton label="electricity">电</ElRadioButton>
          <ElRadioButton label="water">水</ElRadioButton>
          <ElRadioButton label="gas">气</ElRadioButton>
        </el-radio-group>

        <ArkChart :options="chartOptions" style="height: 150px"/>
      </ArkCard>

      <ArkCard class="col-start-7 col-end-11 row-span-2">
        <div class="h-full px-3 grid grid-cols-5 grid-rows-2">
          <div class="flex flex-col justify-center items-center" v-for="(item,index) in otherList" :key="index">
            <ArkCard :class="item.bgColor" style="width: 60px">
              <div class="flex justify-center items-center">
                <ArkIconFont :cls="item.iconCls" style="font-size: 2em"/>
              </div>
            </ArkCard>

            <div class="text-gray-500 mt-2">{{ item.name }}</div>
          </div>
        </div>
      </ArkCard>

      <ArkCard class="cursor-pointer" v-for="(item,index) in cardList" :key="index"
        :title="item.title" :desc="item.desc" :dark="item.drak" hover active
        :class="item.cardCls" @click="item.click"
      >
        <div class="h-full flex items-center justify-center text-2xl">
          <ArkIconFont :cls="item.iconCls" :style="item.iconStyle"/>
        </div>
      </ArkCard>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import ArkChartConstant from '@/components/ark-chart/ArkChartConstant.js';
import ArkIconFont from "@/components/ark-iconfont/ArkIconFont.vue";
import ArkAvatar from "@/components/ark-avatar/ArkAvatar.vue";
import ArkCard from "@/components/ark-card/ArkCard.vue";
import ArkStatisticVisual from "@/components/ark-statistic-visual/ArkStatisticVisual.vue";
import ArkChart from "@/components/ark-chart/ArkChart.vue";

export default defineComponent({
  name: 'Home',
  components: {
    ArkChart,
    ArkStatisticVisual,
    ArkCard, ArkAvatar, ArkIconFont
  },
  data() {
    return {
      energySelected: 'electricity',
      chartOptions: {
        grid: {
          top: '25%',
          bottom: '15%',
          left: '10%',
          right: '10%'
        },
        legend: {
          textStyle: {
            color: ArkChartConstant.LabelColor.FirstLight
          },
          data: ['实际数', '目标数', '节约率']
        },
        tooltip: {
          trigger: 'axis',
          show: true,
          confine: true,
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#7B7DDC',
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              color: ArkChartConstant.LabelColor.FirstLight
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '用电量（kW·h）',
            barWidth: 8,
            splitLine: {
              show: false,
              lineStyle: {
                color: ArkChartConstant.LabelColor.SecondLight,
              }
            },
            axisLabel: {
              color: ArkChartConstant.LabelColor.SecondLight
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: ArkChartConstant.LabelColor.SecondLight,
              }
            },
          },
          {
            type: 'value',
            name: '节约率（%）',
            barWidth: 8,
            splitLine: {
              show: false,
              lineStyle: {
                color: ArkChartConstant.LabelColor.SecondLight,
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: ArkChartConstant.LabelColor.SecondLight,
              }
            },
          }
        ],
        series: [
          {
            name: '实际数',
            type: 'bar',
            barCategoryGap: '50%',
            data: [
              190, 152, 130, 160, 183, 176.7, 135.6, 162.2, 132.6, 120.0, 161.4, 140.3
            ],
            barWidth: 10,
            itemStyle: {
              barBorderRadius: 5,
              color: ArkChartConstant.GradientColor.First
            },
            tooltip: {
              valueFormatter(val) {
                return val + ' kW·h';
              }
            }
          },
          {
            name: '目标数',
            type: 'bar',
            barWidth: 10,
            barCategoryGap: '50%',
            barGap: '-100%',
            z: '-1',
            itemStyle: {
              barBorderRadius: 5,
              color: ArkChartConstant.GradientColor.Second
            },
            data: [
              132.6, 165.9, 199.0, 126.4, 128.7, 170.7, 175.6, 182.2, 148.7, 208.8, 176.0, 142.3
            ],
            tooltip: {
              valueFormatter(val) {
                return val + ' kW·h';
              }
            }
          },
          {
            name: '节约率',
            type: 'line',
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#F02FC2'
              }
            },
            data: [12.0, 0, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            tooltip: {
              valueFormatter(val) {
                return val + ' %';
              }
            }
          },
        ]
      },
      statisticsList: [
        {
          title: '设备数',
          value: 0,
          unit: '个',
          bgColor: 'bg-blue-100',
          iconCls: 'icon-equipment_fill text-blue',
        },
        {
          title: '设备类别数',
          value: 0,
          unit: '个',
          bgColor: 'bg-cyan-100',
          iconCls: 'icon-fenlei text-cyan',
        },
        {
          title: '告警数',
          value: 0,
          unit: '个',
          bgColor: 'bg-red-100',
          iconCls: 'icon-yujing text-red',
        },
        {
          title: '空间数',
          value: 0,
          unit: '个',
          bgColor: 'bg-orange-100',
          iconCls: 'icon-position-mark text-orange',
        }
      ],
      cardList: [
        {
          title: '可视化大屏',
          desc: '数据可视化查看',
          cardCls: 'bg-svg col-span-2 row-start-2',
          iconCls: 'icon-navicon-dphf',
          click() {
            console.log('可视化大屏');
          },
        },
        {
          title: '设备地图',
          desc: '设备可视化操控',
          cardCls: 'bg-gray col-span-2 row-start-2',
          iconCls: 'icon-ziyuanxhdpi',
          click() {
            console.log('设备地图');
          },
        },
        {
          title: '水电能耗数据监测',
          desc: '水电数据',
          cardCls: '!bg-blue-100 col-start-3 col-end-5 row-start-3',
          iconCls: 'icon-shuidianbiaoguanli text-blue',
          iconStyle: 'font-size: 1.5em',
          click() {
            console.log('水电能耗数据监测');
          },
        },
        {
          title: '电器远程集中控制',
          desc: '轻轻一点，连接万物',
          cardCls: '!bg-cyan-100 col-start-3 col-end-5 row-start-4',
          iconCls: 'icon-icon1 text-cyan',
          iconStyle: 'font-size: 1.5em',
          click() {
            console.log('电器远程集中控制');
          },
        },
        {
          title: '通用管理',
          desc: '校园基础管理',
          cardCls: 'bg-gradient-blue col-span-2 row-start-3 row-end-5',
          iconCls: 'icon-icon_yingyongguanli text-blue',
          iconStyle: 'font-size: 2.5em',
          click() {
            console.log('通用管理');
          },
        },
        {
          title: '资产动态管理',
          desc: '方便地管理校园资产',
          cardCls: '!bg-orange-100 col-span-2 row-start-3 row-end-5',
          iconCls: 'icon-shujuzichanguanli text-orange',
          iconStyle: 'font-size: 2.5em',
          click() {
            console.log('资产动态管理');
          },
        },
      ],
      otherList: [
        {
          name: '室外环境监测',
          bgColor: '!bg-green-100',
          iconCls: 'icon-leftbar_environment text-green',
          click() {
            console.log('室内外环境监测');
          },
        },
        {
          name: '漏水积水告警',
          bgColor: '!bg-red-100',
          iconCls: 'icon-loushuiganyingqi text-red',
          click() {
            console.log('漏水积水告警');
          },
        },
        {
          name: '宿舍安全辅助',
          bgColor: '!bg-pink-100',
          iconCls: 'icon-susheyujing text-pink',
          click() {
            console.log('宿舍安全辅助');
          },
        },
        {
          name: '河道水位监测',
          bgColor: '!bg-indigo-100',
          iconCls: 'icon-hedaoshuiweizhan text-indigo',
          click() {
            console.log('河道水位监测');
          },
        },
        {
          name: '智能井盖管理',
          bgColor: '!bg-purple-100',
          iconCls: 'icon-jinggai text-purple',
          click() {
            console.log('智能井盖管理');
          },
        },
        {
          name: '停车车位监测',
          bgColor: '!bg-teal-100',
          iconCls: 'icon-chewei text-teal',
          click() {
            console.log('停车车位监测');
          },
        },
      ],
    };
  },
});
</script>

<style scoped>
.home {
  height: 100% !important;
  width: 100% !important;
  background: url(./background.png);
  background-size: 100% 100%;
}

.bg-svg {
  background: url(./card-bg.svg) no-repeat;
  background-size: 100% 100%
}

.bg-deep-blue {
  background-image: linear-gradient(329deg, rgba(250, 250, 250, 0.06) 0%, rgba(250, 250, 250, 0.06) 50%, rgba(91, 91, 91, 0.06) 50%, rgba(91, 91, 91, 0.06) 100%), linear-gradient(137deg, rgba(192, 192, 192, 0.06) 0%, rgba(192, 192, 192, 0.06) 50%, rgba(150, 150, 150, 0.06) 50%, rgba(150, 150, 150, 0.06) 100%), linear-gradient(321deg, rgba(28, 28, 28, 0.06) 0%, rgba(28, 28, 28, 0.06) 50%, rgba(134, 134, 134, 0.06) 50%, rgba(134, 134, 134, 0.06) 100%), linear-gradient(325deg, rgba(135, 135, 135, 0.06) 0%, rgba(135, 135, 135, 0.06) 50%, rgba(221, 221, 221, 0.06) 50%, rgba(221, 221, 221, 0.06) 100%), linear-gradient(51deg, rgba(105, 105, 105, 0.06) 0%, rgba(105, 105, 105, 0.06) 50%, rgba(185, 185, 185, 0.06) 50%, rgba(185, 185, 185, 0.06) 100%), linear-gradient(272deg, rgba(156, 156, 156, 0.06) 0%, rgba(156, 156, 156, 0.06) 50%, rgba(199, 199, 199, 0.06) 50%, rgba(199, 199, 199, 0.06) 100%), radial-gradient(circle at center center, rgb(137, 146, 224) 0%, rgb(17, 77, 203) 58%);
}

.bg-gray {
  background-image: linear-gradient(144deg, rgba(192, 192, 192, 0.03) 0%, rgba(192, 192, 192, 0.03) 23%, rgba(36, 36, 36, 0.03) 23%, rgba(36, 36, 36, 0.03) 29%, rgba(248, 248, 248, 0.03) 29%, rgba(248, 248, 248, 0.03) 44%, rgba(250, 250, 250, 0.03) 44%, rgba(250, 250, 250, 0.03) 61%, rgba(36, 36, 36, 0.03) 61%, rgba(36, 36, 36, 0.03) 100%), linear-gradient(200deg, rgba(81, 81, 81, 0.03) 0%, rgba(81, 81, 81, 0.03) 68%, rgba(36, 36, 36, 0.03) 68%, rgba(36, 36, 36, 0.03) 82%, rgba(187, 187, 187, 0.03) 82%, rgba(187, 187, 187, 0.03) 95%, rgba(13, 13, 13, 0.03) 95%, rgba(13, 13, 13, 0.03) 97%, rgba(107, 107, 107, 0.03) 97%, rgba(107, 107, 107, 0.03) 100%), linear-gradient(228deg, rgba(248, 248, 248, 0.03) 0%, rgba(248, 248, 248, 0.03) 25%, rgba(125, 125, 125, 0.03) 25%, rgba(125, 125, 125, 0.03) 28%, rgba(228, 228, 228, 0.03) 28%, rgba(228, 228, 228, 0.03) 32%, rgba(185, 185, 185, 0.03) 32%, rgba(185, 185, 185, 0.03) 84%, rgba(82, 82, 82, 0.03) 84%, rgba(82, 82, 82, 0.03) 100%), linear-gradient(244deg, rgba(15, 15, 15, 0.03) 0%, rgba(15, 15, 15, 0.03) 35%, rgba(224, 224, 224, 0.03) 35%, rgba(224, 224, 224, 0.03) 52%, rgba(251, 251, 251, 0.03) 52%, rgba(251, 251, 251, 0.03) 69%, rgba(83, 83, 83, 0.03) 69%, rgba(83, 83, 83, 0.03) 72%, rgba(219, 219, 219, 0.03) 72%, rgba(219, 219, 219, 0.03) 100%), linear-gradient(338deg, rgba(57, 57, 57, 0.03) 0%, rgba(57, 57, 57, 0.03) 32%, rgba(166, 166, 166, 0.03) 32%, rgba(166, 166, 166, 0.03) 54%, rgba(161, 161, 161, 0.03) 54%, rgba(161, 161, 161, 0.03) 56%, rgba(158, 158, 158, 0.03) 56%, rgba(158, 158, 158, 0.03) 61%, rgba(25, 25, 25, 0.03) 61%, rgba(25, 25, 25, 0.03) 100%), linear-gradient(90deg, rgb(225, 225, 225), rgb(231, 231, 231));
}

.bg-gradient-blue {
  background: linear-gradient(90deg, rgba(219, 234, 254, 1) 0%, rgba(96, 165, 250, 1) 100%);
}
</style>